<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../三段/五月/jquery/jquery.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.4.1/dist/css/bootstrap.css">
    <script src="../bootstrap-3.4.1/dist/js/bootstrap.js"></script>
</head>
<style>
    body {
        text-align: center;
    }

    .select {
        width: 150px;
        float: left;
    }

    input {
        margin-top: 20px;
    }

    button {
        margin-top: 20px;
    }

    .table {
        width: 1200px;
        margin: auto;
    }

    tr,
    th,
    td {
        text-align: center;
    }
    #tabul {
        width: 120px;
        height: 40px;
        display: inline-block;
    }
</style>

<body>
    <h1>学生成绩考试录入</h1>
    <!-- 三级联动 -->
    <select name="" id="school" class="form-control select" style="margin-left: 750px;">
        <option value="">请选择学校：</option>
    </select>
    <select name="" id="grade" class="form-control select">
        <option value="">请选择年级：</option>
    </select>
    <select name="" id="class" class="form-control select">
        <option value="">请选择班级：</option>
    </select>
    <br>
    <br>
    <hr>
    <br>
    <!-- 输入姓名和成绩 -->
    姓名：<input type="text" id="name"><br>
    语文：<input type="number" id="yuwen"><br>
    数学：<input type="number" id="shuxue"><br>
    英语：<input type="number" id="yingyu"><br>
    <button id="add">添加</button>
    <hr>
    <!-- 学校名称 -->
    <!-- <input type="button" value="北京市朝阳小学" id="chaoyang">
    <input type="button" value="北京市西城小学" id="xicheng">
    <hr>
    <hr> -->
    <ul class="nav nav-tabs" id="tabul"></ul>
    <!-- 排序 -->
    <button class="fraction" value="yu">语文</button>
    <button class="fraction" value="shu">数学</button>
    <button class="fraction" value="ying">英语</button>
    <button class="fraction" value="zong">总分</button>
    <hr>
    <!-- 成绩表格 -->
    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>年级-班级</th>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>总分</th>
                <th>平均分</th>
                <th>名次</th>
            </tr>
        </thead>
        <tbody id="tlist"></tbody>
    </table>
</body>
<script>
    var grades = []
    var schools = [
        {
            "name": "北京市朝阳小学",
            "city": [
                {
                    "name": "一年级",
                    "area": ["1班", "2班"]
                },
                {
                    'name': '二年级',
                    'area': ["1班", "2班"]
                }
            ]
        },
        {
            "name": "北京市西城小学",
            "city": [
                {
                    "name": "一年级",
                    "area": ["1班", "2班", '3班', '4班', '5班']
                },
                {
                    'name': '二年级',
                    'area': ["1班", "2班", '3班', '4班', '5班']
                }
            ]
        },
    ]
    // $(function () {
    //     showSelect()
    //     showList()

    //     $('#add').click(function () {
    //         var school = $('#school').val(),
    //             grade = $('#grade').val(),
    //             clssa = $('#class').val()
    //         var name = $('#name').val(),
    //             chinese = $('#yuwen').val(),
    //             mathematics = $('#shuxue').val(),
    //             english = $('#yingyu').val()
    //         if (!school || !grade || !clssa || !name || !chinele || !mathematics || !english) {
    //             alert('请填写完整信息')
    //             return
    //         }
    //         var obj = {
    //             className: $('#grade option:checked').html() + '-' + $('#class option:checked').html(),
    //             name: name,
    //             chinese: chinese,
    //             mathematics: mathematics,
    //             english: english,
    //             totol: +chinele + +mathematics + +english,
    //             pv:((+chinele + +mathematics + +english) / 3).toFixed()
    //         }
    //         // console.log(obj);
    //         setData(school,obj)
    //         showList(school)
    //     })
    //     $('.fraction').click(function(){
    //         var type = $(this).attr('val')
    //         $('li').each(function(i){
    //             if ($(this).hasClass('active')) {
    //                 showList(i,type)
    //             }
    //         })
    //     })
    // })

    // //获取本地数据
    // function setData(school,obj){
    //     if (!localStorage.getItem('data')) {
    //         var arr = []
    //         for (i in schools) {
    //             arr.push([])
    //         }
    //         arr[school].push(obj)
    //         localStorage.setItem('data',JSON.stringify(arr))
    //     } else {
    //         var arr = JSON.parse(localStorage.getItem('data'))
    //         arr[school].push(pbj)
    //         localStorage.setItem('data',JSON.stringify(obj))
    //     }
    // }
    // function showList(school = 0,sort = 'zong'){
    //     showTabs(school)
    //     $('li').click(function(){
    //         showList($(this).index())
    //     })
    //     var data = JSON.parse(localStorage.getItem('data'))
    //     if (!data) {
    //         $('#tlist').html('暂没有数据')
    //         return
    //     }
    //     var list = data[school]
    //     grades = localStorage.getItem('grades') ? JSON.parse(localStorage.getItem('grades')) : []
    //     var strHtml = ''
    //         list = dataSort(list,sort)
    //     for (let i in list) {
    //         strHtml += `<tr>
    //                         <th>${list[i].className}</th>
    //                         <th>${list[i].name}</th>
    //                         <th>${list[i].chinese}</th>
    //                         <th>${list[i].mathematics}</th>
    //                         <th>${list[i].english}</th>
    //                         <th>${list[i].totol}</th>
    //                         <th>${list[i].pv}</th>
    //                         <th>${Number(i) + 1}</th>
    //                     </tr>`
    //     }
    //     $('#tlist').html(strHtml)
    // }
    
    // function showTabs(){
    //     var liStr = ''
    //     for (i in schools) {
    //         liStr += `<li>${schools[i].name}</li>`
    //     }
    //     $('#tabul').html(liStr)
    //     $('li').css('background','white')
    //     $('li').eq(index).css('background','red')
    //     $('li').eq(index).addClass('active')
    // }

    // function dataSort (list,type = 'zong') {
    //     switch(type) {
    //         case 'yu':
    //             list.sort(function(a,b){
    //                 return b.chinese - a.chinese
    //             })
    //         break
    //         case 'shu':
    //             list.sort(function(a,b){
    //                 return b.mathematics - a.mathematics
    //             })
    //         break
    //         case 'ying':
    //             list.sort(function(a,b){
    //                 return b.english - a.english 
    //             })
    //         break
    //     }
    //     return list
    // }

    function showSelect () {
        var provice = ''
        for (i in schools) {
            provice += `<option value="${i}">${schools[i].name}</option>`
        }
        $('#school').append(provice)
        $('#school').change(function(){
            $('#grade option:gt(0)').remove()
            var arr = schools[$(this).val()].city,
                strCity = ''
            for (i in arr) {
                strCity += `<option value="${$(this).val()}-${i}">${arr[i].name}</option>`
            }
            $('#grade').append(strCity)
        }) 
        $('#grade').change(function(){
            var arr = $(this).val().split('-')
            $('#grade option:gt(0)').remove()
            var area = schools[arr[0]].city[arr[1]].area
            var html = ''
            for (i in area) {
                html += `<option value="${$(this).val()}-${i}">${area[i]}</option>`
            }
            $('#class').append(html)
        })
    }
    // function saveData(){
    //     localStorage.setItem('grades',JSON.stringify(grades))
    // }




    $(function () {
        showClassList()
        // showTabs()
        showSelect()
        // var strSchool = '<option value="">请选择学校：</option>'
        // for (let i in schools) {
        //     strSchool += `<option value="${i}">${schools[i].name}</option>`
        // }
        // $('#school').html(strSchool)
    })
    // $('#school').change(function () {
    //     var index = $(this).val()
    //     var indexAll = schools[index].city
    //     var strGrade = '<option value="">请选择年级：</option>'
    //     for (let i in indexAll) {
    //         strGrade += `<option value="${index}-${i}">${indexAll[i].name}</option>`
    //     }
    //     $('#grade').html(strGrade)
    // })
    // $('#grade').change(function () {
    //     var index = $(this).val()
    //     var indexAll = index.split('-')
    //     var area = schools[indexAll[0]].city[indexAll[1]].area
    //     var strClass = '<option value="">请选择班级：</option>'
    //     for (let i in area) {
    //         strClass += `<option value="${index}-${i}">${area[i]}</option>`
    //     }
    //     $('#class').html(strClass)
    //     // saveData('grades',grades)
    // })

    $('#add').click(function () {
        var grade = $('#grade option:checked').html() + '-' + $('#class option:checked').html()
        var name = $('#name').val()
        var chinese = $('#yuwen').val()
        var mathematics = $('#shuxue').val()
        var english = $('#yingyu').val()
        var score = Number(chinese) + Number(mathematics) + Number(english)
        var average = Math.round((Number(chinese) + Number(mathematics) + Number(english)) / 3)
        var zhi = {
            grade: grade,
            name: name,
            chinese: chinese,
            mathematics: mathematics,
            english: english,
            score: score,
            average: average
        }
        grades.push(zhi)
        saveData('grades', grades)
        showClassList()
    })

    // function showTabs(){
    //     var liStr = ''
    //     for (i in schools) {
    //         liStr += `<li>${schools[i].name}</li>`
    //     }
    //     $('#tabul').html(liStr)
    //     $('li').css('background','white')
    //     $('li').eq(index).css('background','red')
    //     $('li').eq(index).addClass('active')
    // }

    function showClassList() {
        grades = localStorage.getItem('grades') ? JSON.parse(localStorage.getItem('grades')) : []
        var strHtml = ''
        for (let i in grades) {
            strHtml += `<tr>
                            <th>${grades[i].grade}</th>
                            <th>${grades[i].name}</th>
                            <th>${grades[i].chinese}</th>
                            <th>${grades[i].mathematics}</th>
                            <th>${grades[i].english}</th>
                            <th>${grades[i].score}</th>
                            <th>${grades[i].average}</th>
                            <th>${Number(i) + 1}</th>
                        </tr>`
        }
        $('tbody').html(strHtml)
    }

    $('.fraction').click(function(){

    })

    function saveData() {
        localStorage.setItem('grades', JSON.stringify(grades))
    }
</script>

</html>